
html, body {
    // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    //     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    //     sans-serif;
    font-family: 'Roboto' , sans-serif;

    font-size: 10px; // sets the size of 1 rem to the given size (this is because 1 rem is defined as the font-size of the root element)

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Variables */
    --scrollbar-background-color: rgba(255, 255, 255, 0.5);
    --scrollbar-foreground-color: rgba(5, 94, 121, 0.8);

    --panel-background-color: rgb(23, 24, 25);
    --lighter-panel-background-color: rgba(44, 59, 59, 0.7);
    --panel-text-color: rgb(238, 238, 238);
    --gray-color: rgb(122, 122, 122);
    --dark-gray-color: rgb(50, 50, 50);
    --panel-link-text-color: #0066CC;

    background-color: black;

    @mixin panel_section_title {
        background-color: var(--panel-background-color);
        color: var(--panel-text-color);

        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;

        font-size: 1.8rem;

        border: 0px; // for buttons
    }

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    * {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-background-color) var(--scrollbar-foreground-color) !important;

        margin: 0;
        padding: 0;
    }

    // global styles, they may be overridden by more specific styles
    
    .TimeBar, .ColoredTimeBar, .DoubleTimeBar > .middleSVG {
        display: inline-flex;
        align-items: center;
        width: 100%;

        input[type=text] {
            color:var(--panel-text-color);
            background-color: var(--panel-background-color);
            border: none;
        }
        
        .inputDiv {
            height: 100%;
            padding-right: 5px;
            padding-left: 0;

            display: inline-flex;
            align-items: center;

            input[type=text] {
                width: 4.5rem;
            }
        }
        
        .timeBarDiv {
            height: 30px;
            width: 100%;

            svg {
                height: 100%;
                width: 100%;
            }
        }
    }

    .verticallyCentered {
        position:absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .DoubleTimeBar {
        width: 100%;

        .topTimeBar {
            width: 100%;
            padding: 0px;
            margin: 0px;
        }
        .middleSVG {
            width: 100%;
            padding: 0px;
            margin: 0px;

            .svgDiv {
                padding: 0px;
                margin: 0px;
                width: 100%;
            }
        }
        .bottomTimeBar {
            width: 100%;
            padding: 0px;
            margin: 0px;
        }
    }

    // --- Area Specific Styling ---
    // The Application is styled to look a certain way, with some components
    // looking different depending on where they are. This section is for
    // styling components depending on where they are in the application.
    // Note that the styling is as specific as possible so as to make it clear
    // what is being selected where.

    #root {
        overflow: hidden;
        width: 100%;
        height: 100%;

        font-size: 1.6rem; // 16pt font

        .App {
            width: 100%;
            height: 100%;
            
            .MuiSwitch-track{
                background-color: var(--gray-color);
            }

            input{
                font-size: 15px;
                color:var(--panel-text-color);
                background-color: var(--dark-gray-color);
                border: 1px solid var(--gray-color);
            }
        
            input:hover {
                border: 1px solid var(--panel-text-color);
            }
        
            input[type=text] {
                padding: 0.25em 0.5em;
                margin-top: -0.5rem;
                margin-left: 1rem;
                font-size: 15px;
                color:var(--panel-text-color);
                background-color: var(--dark-gray-color);
                border: 1px solid var(--dark-gray-color);
                border-radius: 0.25em;
            }
        
            input[type=text]:hover {
                border: 1px solid var(--panel-text-color);
            }
        
            input[type=button]{
                font-size: 15px;
                font-family: 'Roboto' , sans-serif;
                background-color: var(--panel-background-color);
                padding: 0.25em 0.5em;
                border-radius: 1em;
                border: 2px solid var(--panel-text-color);
                outline: none;
                color: var(--panel-text-color);
                cursor: pointer;
            }
        
            input[type=button]:hover{
                background: var(--panel-text-color);
                color: var(--panel-background-color);
            }

            .LabeledCheckBox{
                input[type="checkbox"]{
                    margin-left: 1rem;
                    transform: scale(1.5);
                }
            }

            .ClickButton {
                font-size: 15px;
                font-family: 'Roboto' , sans-serif;
                background-color: var(--panel-background-color);
                padding: 0.25em 0.5em;
                border-radius: 1em;
                border: 2px solid var(--panel-text-color);
                outline: none;
                color: var(--panel-text-color);
                cursor: pointer;
            }
            .ClickButton:hover{
                background: var(--panel-text-color);
                color: var(--panel-background-color);
            }
        
            .Button{
                font-size: 15px;
                font-family: 'Roboto' , sans-serif;
                background-color: var(--panel-background-color);
                padding: 0.25em 0.5em;
                border-radius: 1em;
                border: 2px solid var(--panel-text-color);
                outline: none;
                color: var(--panel-text-color);
                cursor: pointer;
            }
        
            .Button:hover{
                background: var(--panel-text-color);
                color: var(--panel-background-color);
            }

            .FileUploader {
                .fileInputHolder {
                    display: inline-block;
                    font-size: 15px;
                    font-family: 'Roboto' , sans-serif;
                    background-color: var(--panel-background-color);
                    padding: 0.25em 0.5em;
                    border-radius: 1em;
                    border: 2px solid var(--panel-text-color);
                    outline: none;
                    color: var(--panel-text-color);
                    cursor: pointer;
                }

                .fileInputHolder:hover {
                    background: var(--panel-text-color);
                    color: var(--panel-background-color);
                }

                input[type=file] {
                    display: none;
                }
            }

            .DragButtonButton {
                    font-size: 15px;
                    font-family: 'Roboto', sans-serif;
                    background-color: var(--panel-background-color);
                    padding: 0.25em 0.5em;
                    border-radius: 1em;
                    border: 2px solid var(--panel-text-color);
                    color: var(--panel-text-color);
                    cursor: pointer;
                }
            .DragButtonButton:hover{
                cursor: grab;
                background: var(--panel-text-color);
                color: var(--panel-background-color);
            }

            .RobotCanvas {
                width: 100%;
                height: 100%;

                canvas {
                    width: 100%;
                    height: 100%;
                }
            }
            
            .lineGraph {
                margin: 10px 10px 10px 10px;

            }
            .BuildPage, .ViewPage {
                width: 100%;
                height: 100%;

                --top-margin: 1%;
                --bottom-margin: 1%;
                --left-margin: 1%;
                --right-margin: 1%;

                --panel-padding: 10px;

                --top-container-height: 50px;
                --bottom-container-height: 25px;
                --left-container-width: 15%;
                --right-container-width: 15%;

                .RobotWorkspace {
                    color: var(--panel-text-color);
                    width: 100%;
                    height: 100%;
                    overflow-x: hidden;
                    overflow-y: hidden;

                    --ink-bar-color: #108ee9;

                    --panel-background-color: rgb(23, 24, 25);
                    .dock-top .dock-bar{
                        background-color: var(--panel-background-color);
                    }
                    .dock.dock-top{
                        background-color: var(--panel-background-color);
                    }
                    .dock-tab{
                        background-color: var(--panel-background-color);
                    }
                    .dock-ink-bar {
                        background-color: var(--ink-bar-color);
                    }

                    .dock-layout {
                        width: 98.5%;
                        height: 98.5%;

                        margin: 0.5%;
                    }

                    .dock-tabpane {
                        overflow-x: auto;
                        overflow-y: auto;

                        > * {
                            margin: 1rem;
                        }
                    }

                    .dock-pane-cache {
                        margin: 0;
                    }

                    div[class^="popup"] {
                        display: none;
                        position: fixed;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        padding: 20px;
                        border: 1px solid #ccc;
                        background-color: var(--panel-background-color);
                        z-index: 1000;
                        width: 600px; 
                        height: 600px; 
                        overflow: auto;
                        .Xmark{
                            position: sticky;
                            left: 100%;
                            top: 0;
                            border: none;
                            font-size: 15px;
                            cursor: pointer;
                            z-index: 1; 
                            color: var(--panel-text-color);
                            background: none;
                        }
                    }

                    .bottom-line {
                        border-bottom: 1px solid var(--gray-color);
                    }

                    .top-line {
                        padding-top: 1rem;
                        margin-top: 1rem;
                        margin-bottom: 1rem;
                        border-top: 1px solid var(--gray-color);
                    }

                    .Multiselect-container{
                        display: block;
                        width: 100%;
                        margin-top: 1.5rem;
                        margin-bottom: 1.5rem;
                    }

                    .row-container::after{
                        content: " ";
                        display: block; 
                        height: 0; 
                        clear: both;
                    }

                    .row-container{
                        margin-top: 1.5rem;
                        margin-bottom: 1.5rem;

                        label{
                            float:left;
                        }

                        input[type=text] {
                            float: left;
                        }

                        input[type=button]{
                            float: right;
                        }

                        div{
                            float: right;
                        }

                        .select-container{
                            float: left;
                            margin-top: -1rem;
                            margin-left: 1rem;
                        }

                        .switch-left-label{
                            float: right;
                        }

                        .MuiSwitch-root{
                            float: right;
                            margin-top: -1rem;
                            margin-left: 0.5rem;
                        }

                        .switch-right-label{
                            float: right;
                            margin-left: 0.5rem;
                        }

                    }

                      
                    .AnimationEditor {
                        .RobotAnimationGroupEditor {
                            margin-top: 1.5rem;
                        }

                        input[type=button] {
                            padding: 0.25rem 0.5rem 0.25rem 0.5rem;
                        }

                        .RobotAnimationGroupEditor {
                            white-space: nowrap;

                            > .header {
                                display: flex;
                                align-items: center;

                                * + * {
                                    margin-left: 0.5rem;
                                }
                            }

                            > .content {
                                .RobotAnimationEditor {
                                    display: flex;
                                    align-items: center;

                                    .LabeledTextInput {
                                        input[type=text] {
                                            margin-left: 0.5rem;
                                            width: 4rem;
                                        }
                                    }

                                    > * + * {
                                        margin-left: 1rem;
                                    }
                                }
                            }
                        }
                    }


                    .LoadAndSavePanel {

                        color: var(--panel-text-color);
                    
                        .MotionLoader{
                            .LoadRobot, .LoadCSV{
                                margin-left: 0.5rem;
                            }
                        }
                    }

                    .SceneSelectorPanel {
                        div + div {
                            margin-top: 0.5rem;
                        }

                        .ButtonGroup {
                            .Button {
                                margin-left: 0.5rem;
                                float: left;
                            }
                        }
                    }

                    .RobotJointsPanel {
                        .sectionTitle {
                            margin-top: 0.25rem;
                            margin-bottom: 1.5rem;
                        }

                    }

                    .LabeledSlider{
                        margin-top: 1.5rem;
                        margin-bottom: 1.5rem;
                        display: flex;
                        justify-content: space-between;
                        // --text-input-font-size: 1.2rem;
                        // --text-input-width: calc(var(--text-input-font-size) * 3);

                        .labelDiv {
                            margin-bottom: 0.2rem;
                        }

                        .inputDiv {
                            display: flex;
                            justify-content: space-between;
                            width: 70%;
                            --text-input-font-size: 1.2rem;
                            --text-input-width: calc(var(--text-input-font-size) * 3);

                            input[type="text"] {
                                margin-right: 2rem;
                                width: 2em;
                                color:var(--panel-text-color);
                                background-color: var(--panel-background-color);
                                border: none;
                            }

                            input[type="range"] {
                                width: calc(100% - var(--text-input-width));
                            }
                        }
                    }

                    .LabeledTextInput{
                        margin-top: 1rem;
                        * + * {
                            margin-left: 0.5rem;
                        }
                        display: flex;
                    }

                    .labeledSelect{
                        margin-top: 2rem;
                       
                        display: flex;
                        .Select{
                            width: 50%;
                        }   

                        .select-container{
                            
                            float: left;
                            margin-top: -1rem;
                            margin-left: 1rem;
                        }
                    }
                 

                    .accordion {
                        border: 1px solid rgba(0, 0, 0, 0.1);
                        border-radius: 2px;
                        margin-left: -10px;
                    }
                    
                    .accordion__item + .accordion__item {
                        border-top: 1px solid rgba(0, 0, 0, 0.1);
                    }
                    
                    .accordion__button {
                        //background-color: #f4f4f4;
                        color: var(--panel-text-color);
                        cursor: pointer;
                        padding: 5px;
                        width: 100%;
                        text-align: left;
                        border: none;
                    }
                    
                    .accordion__button:hover {
                        background-color: #007bff;
                    }
                    
                    .accordion__button:before {
                        display: inline-block;
                        content: '';
                        height: 10px;
                        width: 10px;
                        margin-right: 12px;
                        border-bottom: 2px solid currentColor;
                        border-right: 2px solid currentColor;
                        transform: rotate(-45deg);
                    }
                    
                    .accordion__button[aria-expanded='true']::before,
                    .accordion__button[aria-selected='true']::before {
                        transform: rotate(45deg);
                    }
                    
                    [hidden] {
                        display: none;
                    }
                    
                    .accordion__panel {
                        padding-left: 20px;
                        animation: fadein 0.35s ease-in;
                    }

                    .PopUpGroup{
                        align-items: center;
                        margin-top: 0.5rem;
                        margin-bottom: 0.5rem;

                        .OpenPop{
                            cursor: pointer;
                            // position: absolute;
                            background-color: var(--panel-background-color);
                            padding: 0.25em 0.5em;
                            border-radius: 1em;
                            border: 2px solid var(--panel-text-color);
                            color: var(--panel-text-color);
                            font-size: 15px;
                            // top: 1%;
                            // left: 5%;
                            // bottom: 0;
                            // right: 0;
                            
                        }
                        .OpenPop:hover{
                            background: var(--panel-text-color);
                            color: var(--panel-background-color);
                        }
                        // visibility: hidden;
                        display: flex;
                        gap: 10px;
                    }

                    .HomeTab {
                        color: var(--panel-text-color);
                        text-align: center;

                        .ExampleImageGroup {
                            display: inline-block;
                            // margin-left: auto;
                            // margin-right: auto;
                            // display: block;
                            position: relative;
                            width: 22%;
                            padding: 1em;
                        }
  
                        .ExampleImage {
                            width: 100%;
                            padding: 1em;
                        }

                        .ExampleImageOverlay {
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            height: 100%;
                            width: 100%;
                            opacity: 0;
                            font-size: 40px;
                            transition: .5s ease;
                            background-color: var(--panel-background-color);
                            -webkit-transition: all 200ms ease-out;
                            -moz-transition: all 200ms ease-out;
                            -o-transition: all 200ms ease-out;
                            -ms-transition: all 200ms ease-out;
                            transition: all 200ms ease-out;
                            cursor: pointer;
                        }
                        
                        .ExampleImageGroup:hover .ExampleImageOverlay {
                            opacity: 0.9;
                        }

                        .ExampleImageOverlayText {
                          color: --var(panel-text-color);
                          font-size: 1.5rem;
                          position: absolute;
                          top: 50%;
                          left: 50%;
                          -webkit-transform: translate(-50%, -50%);
                          -ms-transform: translate(-50%, -50%);
                          transform: translate(-50%, -50%);
                          text-align: center;
                        }
                        
                        .GithubIcon {
                            width: 5rem;
                        }
                    }


                    

                    .AnimationPanel {
                        margin: 0;
                        padding: 1rem;
                        height: calc(100% - 2rem);
                        width: calc(100% - 2rem);

                        display: inline-flex;
                        align-items: center;

                        // Put space between the elements
                        > * + * {
                            margin-left: 1rem;
                        }

                        .Button{
                            cursor: pointer; 
                            background-color: var(--panel-background-color);
                            border: none; /* Remove any default border */
                            .Icon{
                                font-size: 20px;
                                //background-color: var(--panel-background-color);
                                color: #d5dce0;
                            }
                        }

                        input[type=button] {
                            padding-left: 0.6rem;
                            padding-right: 0.6rem;
                            padding-top: 0.4rem;
                            padding-bottom: 0.4rem;
                        }

                        input[type=text] {
                            background-color: var(--panel-background-color);
                            border: none;
                        }

                    }
                    .Legend{
                        .white-icon {
                            fill: var(--panel-text-color); /* White color */
                        }
                    }
                    .SceneOptionPanel{
                        display: block;
                        color: var(--panel-text-color);
                     
                        > * {
                            margin-bottom: 0.5rem;
                        }
                        .SceneViews > * {
                            margin-bottom: 0.5rem;
                        }

                    }

                    .ColorPicker{
                        display: flex;
                        gap: 5px;
                        .ColorInput{
                            margin-left: 2rem;
                            width: 50%;
                            top: 40%;
                            transform: translateY(40%);
                            > *{
                                display: block; 
                                margin-bottom: 0.5rem;
                            }
                        }
                    }

                    .RobotOptionPanel{
                        > * {
                            margin-bottom: 0.5rem;
                        }
                        color: var(--panel-text-color);

                        .Select-JointMotion, .Select-Transformation{
                            > * {
                                display: block;
                                margin-bottom: 1.5rem;
                            }
                        }
                    }
                    .SelectionPanel{
                        width: calc(100% - 2rem);
                        height: calc(100% - 2rem);
                        color: var(--panel-text-color);

                        .DeleteButton{
                            position: absolute;
                            right: 10px;
                            margin-top: 5px;
                            cursor: pointer; 
                            background-color: var(--panel-background-color);
                            border: none; /* Remove any default border */
                            .TrashIcon{
                                font-size: 16px;
                                //background-color: var(--panel-background-color);
                                color: var(--panel-text-color);
                            }
                        }
                        .ClickButton {
                            font-size: 15px;
                            font-family: 'Roboto' , sans-serif;
                            background: hsla(32, 94%, 49%, 0.913);
                            padding: 0.5em 1em;
                            border-radius: 1em;
                            border: none;
                            outline: none;
                            color: #d5dce0;
                            cursor: pointer;
                        }
                        .ClickButton:hover{
                            background: hsla(32, 98%, 21%, 0.913);
                        }

                        .DragButton_Scene {
                            display: inline;
                            .DragButtonButton{
                               font-size: 15px;
                               font-family: 'Roboto' , sans-serif;
                            background: #4043fa;
                            padding: 0.5em 1em;
                            border-radius: 1em;
                            border: none;
                            outline: none;
                            color: #d5dce0;
                            cursor: pointer; 
                            }
                            .DragButtonButton:hover{
                                cursor: grab;
                                background: #1c1e6b;
                            }
                        }
                        

                        .DragButton_Robot {
                            font-size: 15px;
                            font-family: 'Roboto' , sans-serif;
                            background: #7d7df8;
                            padding: 0.5em 1em;
                            border-radius: 1em;
                            border: none;
                            outline: none;
                            color: #d5dce0;
                            cursor: pointer;
                        }
                        .DragButton_Robot:hover{
                            cursor: grab;
                            background: #2a2a59;
                        }

                        .DragButton_RobotPart {
                            font-size: 15px;
                            font-family: 'Roboto' , sans-serif;
                            background: #C47AFF;
                            padding: 0.5em 1em;
                            border-radius: 1em;
                            border: none;
                            outline: none;
                            color: #d5dce0;
                            cursor: pointer;
                            margin-top: 5px;
                        }
                        .DragButton_RobotPart:hover{
                            cursor: grab;
                            background: #583774;
                        }
                      
                    }

                    
                    .GraphOptionPanel{
                        color: var(--panel-text-color);
                        margin: 1rem;
                        display: block;
                        > * {
                            margin-bottom: 0.5rem;
                        }
                        .SceneViews > * {
                            margin-bottom: 0.5rem;
                        }
                        .ButtonsContainer{
                            display: flex;
                            //margin-left: 10px;
                            //margin-right: 10px;
                            gap: 10px;
                            //justify-content: space-between;
                        }
                        
                    }
                    .GraphPanel {  // this is actually class name of the Graph Panel
                        // margin: 1rem;
                        .xLabel {
                            font-size: 1.3rem;
                        }

                        .yLabel {
                            font-size: 1.3rem;
                        }

                        .GraphAxis {
                            font-size: 1.3rem;
                        }
                        .GraphGrid {
                            opacity: 0.15;
                        }

                        margin: 0;
                        width: 100%; 
                        height: 100%;
                        display: block;
                        color: var(--panel-text-color);
                        overflow: auto;
                        .LegendMessage{
                            margin: 1rem;
                            align-items: center;

                            .OpenPop{
                                cursor: pointer;
                                // position: absolute;
                                background-color: var(--panel-background-color);
                                padding: 0.25em 0.5em;
                                border-radius: 1em;
                                border: 2px solid var(--panel-text-color);
                                color: var(--panel-text-color);
                                font-size: 15px;
                                // top: 1%;
                                // left: 5%;
                                // bottom: 0;
                                // right: 0;
                                
                            }
                            .OpenPop:hover{
                                background: var(--panel-text-color);
                                color: var(--panel-background-color);
                            }
                            // visibility: hidden;
                            display: flex;
                            gap: 10px;
                        }
                    }

                    .GraphPanel.selected {
                            box-sizing: border-box; /* Include border and padding in the dimensions */
                            border-color: #4042e8;
                            border-width: 0.2rem;
                            border-style: solid;
                            // margin: 0;
                    }

                    .RobotCanvas {
                        padding: 0rem;
                        margin: 0rem;

                        overflow-x: hidden;
                        overflow-y: hidden;

                        width: 100%;
                        height: 100%;
                    }

                    .RobotCanvasCanvas.selected {
                        box-sizing: border-box; /* Include border and padding in the dimensions */
                        width: 100%; /* Ensure the canvas takes the full width of the container */
                        height: 100%; /* Ensure the canvas takes the full height of the container */
                        border-color: #4042e8;
                        border-width: 0.2rem;
                        border-style: solid;
                        // margin: 0;
                    }
                }

                .sectionTitleDiv {
                    // Controls the "Select Scene" header as a Button to expand the modal
                    > input[type=button] {
                        @include panel_section_title;
                    }

                    // Controls the "Select Scene" header as a label
                    > label {
                        @include panel_section_title;
                    }
                }

                .modal {
                    overflow-x: auto;
                    overflow-y: auto;
                }

                .modal > .SceneSelectorPanel {
                    margin: 2rem;

                    // Controls the "Select Scene" header as a Button to expand the modal
                    > input[type=button] {
                        @include panel_section_title;
                    }

                    // Controls the "Select Scene" header as a label
                    > label {
                        @include panel_section_title;
                    }
                }

                .SceneSelectorPanel, .bigModal > .SceneSelectorPanel {

                    .bigModal > .SceneSelectorPanel {
                        padding-top: 0.5rem;

                        > div {
                            padding-bottom: 0.25rem;
                        }
                    }

                    > div {
                        // This inner div is the one that holds the label
                        // and there is another one that holds the table
                        white-space: nowrap;

                        table {
                            overflow-x: auto;
                            margin-top: 1rem;
                            margin-bottom: 1rem;

                            border-collapse: collapse;
                            border-spacing: 1rem 1rem;

                            tbody {
                                tr {
                                    th, td {
                                        --padding-top: 0.35rem;
                                        --padding-bottom: 0.35rem;
                                        --padding-left: 0.5rem;
                                        --padding-right: 0.5rem;
                                        border: 2px solid rgb(122, 122, 122);

                                        input[type=button] {
                                            background-color: var(--panel-background-color);
                                            color: white;
                                            padding-top:    var(--padding-top);
                                            padding-bottom: var(--padding-bottom);
                                            padding-left:   var(--padding-left);
                                            padding-right:  var(--padding-right);
                                            height: 100%;
                                            width: 100%;
                                            border-width: 0;
                                        }

                                        label {
                                            padding-top:    var(--padding-top);
                                            padding-bottom: var(--padding-bottom);
                                            padding-left:   var(--padding-left);
                                            padding-right:  var(--padding-right);
                                            height: 100%;
                                            width: 100%;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .LeftContainer {
                    color: #d5dce0;
                    position: fixed;
                    top: var(--top-margin);
                    left: var(--left-margin);
                    width: var(--left-container-width);
                    bottom: calc(var(--bottom-container-height) + var(--bottom-margin) + calc(var(--panel-padding) * 2) + 1rem);
                    padding: var(--panel-padding);
                    background-color: var(--panel-background-color);
                    overflow-x: auto;
                    overflow-y: auto;

                    > hr {
                        margin-top: 1rem;
                        margin-bottom: 1rem;
                        color: #d5dce0;
                    }

                }

                .hugeModal {
                    position: fixed;
                    color: #d5dce0;
                    background-color: var(--panel-background-color);

                    top:    calc(var(--top-margin) + 1rem);
                    left:   calc(var(--left-margin));
                    bottom: calc(var(--bottom-margin) + var(--bottom-container-height) + var(--panel-padding) * 2 + 1rem);
                    right:  calc(var(--right-margin));
                }

                .bigModal {
                    position: fixed;
                    color: #d5dce0;
                    background-color: var(--panel-background-color);
                    
                    top:    calc(var(--top-margin) + var(--top-container-height) + var(--panel-padding) * 2 + 1rem);
                    bottom: calc(var(--bottom-margin) + var(--bottom-container-height) + var(--panel-padding) * 2 + 1rem);
                    left:   calc(var(--left-margin) + var(--left-container-width) + var(--panel-padding) * 2 + 1rem);
                    right:  calc(var(--right-margin) + var(--right-container-width) + var(--panel-padding) * 2 + 1rem);
                }
            }

            .Panel {
                width: 100%;
                height: 100%;
            }

            
            code {
                font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
            }

            // popup "?" buttons
            .PopUpGroup {
                align-items: center;
                .OpenPop {
                    cursor: pointer;
                    // position: absolute;
                    background-color: var(--panel-background-color);
                    padding: 0.25em 0.5em;
                    border-radius: 1em;
                    border: 2px solid var(--panel-button-bg-color);
                    color: var(--panel-button-bg-color);
                    font-size: 15px;
                    // top: 1%;
                    // left: 5%;
                    // bottom: 0;
                    // right: 0;
                    
                }
                .OpenPop:hover{
                    background: var(--panel-button-bg-color);
                    color: var(--panel-background-color);
                }
                // visibility: hidden;
                display: flex;
                gap: 10px;
            }

            .HelpPopup {
                display: block;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                padding: 20px;
                border: 1px solid #ccc;
                color: white;
                background-color: var(--panel-background-color);
                z-index: 1000;
                width: 40%; 
                height: 80%; 
                overflow: auto;

                .content {
                    transform: translate(0, -2.5rem);

                    input[type=button], button{
                        font-size: 15px;
                        font-family: 'Roboto' , sans-serif;
                        background: transparent;
                        border: none;
                        outline: none;
                        color: var(--panel-link-text-color);
                        text-decoration: underline;
                        cursor: pointer;
                    }

                    ul{
                        margin-left: 20px;
                        margin-bottom: 10px;
                    }

                    h1{
                        margin-bottom: 20px;
                    }

                    h3{
                        margin-bottom: 10px;
                    }

                    p{
                        margin-bottom: 10px;
                    }

                    img{
                        margin-bottom: 10px;
                        width: 100%;
                    }
                }

                .Xmark {
                    display: block;
                    position: sticky;
                    left: 100%;
                    top: 0rem;
                    transform: translate(0, -1.5rem);
                    border: none;
                    font-size: 15px;
                    cursor: pointer;
                    z-index: 1; 
                    color: var(--panel-text-color);
                    background: none;
                }
            }

            .HelpPopup.HelpPopup-LoadingStarted, .HelpPopup.HelpPopup-LoadingFailed{
                border: none;
                width: 40%; 
                height: 10%; 
                background: transparent;
                .content{
                    position: relative;
                    top: 60%;
                    .LoadingMessage{
                        font-size: 20px;
                        font-weight: bold;
                        position: relative;
                        text-align: center;
                    }
                }
            }

            .overlay {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.8);
                z-index: 999;
            }
        }
    }

    /* width */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
        background: var(--scrollbar-background-color);
        border-radius: 5px;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: var(--scrollbar-foreground-color);
        border-radius: 5px;
    }
}